<template>
	<view class="apply">
		<view class="user-form">
			<view class="title">租期信息</view>
			<picker @change="leasePicker" :value="1" range-key="value" :range="leaseList">
				<view class="form-item flex align-center">
					<view class="item-left">租期</view>
					<input type="text" v-model="lease" disabled="disabled" placeholder="请选择租期"
						placeholder-class="input-css">
					<image src="../../static/index/zu904-2x.png" mode="" style="width: 20rpx;height: 20rpx;"></image>
				</view>
			</picker>
		</view>
		<view class="user-form" style="margin-top: 20rpx;">
			<view class="title">个人信息</view>
			<view class="form-item flex align-center">
				<view class="item-left">姓名</view>
				<input type="text" v-model="requestData.realname" placeholder="请输入你的名字" placeholder-class="input-css">
			</view>
			<picker mode="date" @change="birthdayPicker">
				<view class="form-item flex align-center">
					<view class="item-left">生日</view>
					<input type="text" v-model="requestData.birthday" disabled="disabled" placeholder="请选择生日（选填）"
						placeholder-class="input-css">
					<image src="../../static/index/zu904-2x.png" mode="" style="width: 20rpx;height: 20rpx;"></image>
				</view>
			</picker>

			<view class="form-item flex align-center">
				<view class="item-left">电话</view>
				<input type="number" v-model="requestData.mobile" placeholder="请输入电话" placeholder-class="input-css">
			</view>
			<view class="form-item flex align-center">
				<view class="item-left">微信号</view>
				<input type="text" v-model="requestData.wechat" placeholder="请输入微信号" placeholder-class="input-css">
			</view>
			<view class="form-item flex align-center">
				<view class="item-left">邮箱</view>
				<input type="text" v-model="requestData.email" placeholder="请填写邮箱（选填）" placeholder-class="input-css">
			</view>
			<view class="form-item flex align-center">
				<view class="item-left">学校</view>
				<input type="text" v-model="requestData.school" placeholder="请输入学校名称" placeholder-class="input-css">
			</view>
			<view class="form-item flex align-center">
				<view class="item-left">专业</view>
				<input type="text" v-model="requestData.major" placeholder="请输入专业名称（选填)" placeholder-class="input-css">
			</view>
		</view>
		<view class="user-form" style="margin-top: 20rpx;">
			<view class="title">担保人信息(爸爸妈妈)</view>
			<view class="form-item flex align-center">
				<view class="item-left">姓名</view>
				<input type="text" v-model="requestData.guarantee" placeholder="请输入担保人名字" placeholder-class="input-css">
			</view>
			<picker @change="bindPickerChange" :value="1" :range="array">
				<view class="form-item flex align-center">
					<view class="item-left">与您关系</view>
					<input type="text" v-model="requestData.relation" disabled="disabled" placeholder="请选择"
						placeholder-class="input-css">
					<image src="../../static/index/zu904-2x.png" mode="" style="width: 20rpx;height: 20rpx;"></image>
				</view>
			</picker>
			<view class="form-item flex align-center">
				<view class="item-left">电话</view>
				<input type="number" v-model="requestData.guarantee_mobile" placeholder="请输入电话"
					placeholder-class="input-css">
			</view>
		</view>
		<view class="user-form" style="margin-top: 20rpx;padding-bottom: 20rpx;">
			<view class="title" style="margin-bottom: 20rpx;">特殊要求</view>
			<view class="textarea">
				<textarea name="" v-model="requestData.remark" id="" cols="50" rows="20" placeholder="可输入内容"
					placeholder-class="input-css"></textarea>
			</view>
		</view>
		<view style="height: 300rpx;"></view>
		<view class="button">
			<view class="flex align-center justify-center py-2">
				<view class="checked" @click="this.dealShow = !this.dealShow">
					<image :src="dealShow?'/static/common/active.png':'/static/common/unchecked.png'" mode=""></image>
				</view>
				<view class="font-28 cl-44">
					<text @click="this.dealShow = !this.dealShow">阅读并同意</text>
					<text @click="jump({url:'/pages/fwxy/fwxy'})" style="color: #ffb24b;">《服务协议》</text>及
					<text @click="jump({url:'/pages/yszc/yszc'})" style="color: #ffb24b;">《隐私政策》</text>
				</view>
			</view>
			<view class="butxt" @tap="submit">提交</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				dealShow: true,
				array: ['父亲', '母亲', '朋友', '其他'],
				leaseList: [],
				lease: '',
				requestData: {
					id: '', //公寓id
					lease: '', //周期
					realname: '',
					birthday: '',
					mobile: '',
					wechat: '',
					email: '',
					school: '',
					major: '',
					guarantee: '', //担保人
					relation: '', //关系
					guarantee_mobile: '', //担保人电话
					remark: '',
					is_apply: '1',
				}
			}
		},
		onLoad(option) {
			console.log(option)
			this.requestData.id = option.id
			if (option.lease) {
				this.requestData.lease = option.lease
				this.lease = option.lease
			}
			this.$H.post(this.$api.get_room_lease, {
				id: option.id
			}, {
				token: true
			}).then(res => {
				console.log(res)
				this.leaseList = res.data
			})
		},
		methods: {
			//选择周期
			leasePicker(e) {
				console.log(e)
				this.lease = this.leaseList[e.detail.value].value
				this.requestData.lease = this.leaseList[e.detail.value].key
			},
			submit() {
				let reg = /^[1][3,4,5,7,8,9][0-9]{9}$/
				if (!this.requestData.lease) return this.msg('请选择周期')
				if (!this.requestData.realname) return this.msg('请填写姓名')
				// if (!this.requestData.birthday) return this.msg('请选择生日')
				if (!this.requestData.mobile) return this.msg('请填写电话')
				if (!reg.test(this.requestData.mobile)) return this.msg('请输入正确的手机号')
				if (!this.requestData.wechat) return this.msg('请填写微信号')
				// if (!this.requestData.email) return this.msg('请填写邮箱')
				if (!this.requestData.school) return this.msg('请填写学校')
				if (!this.requestData.guarantee) return this.msg('请填写担保人')
				if (!this.requestData.relation) return this.msg('请选择与担保人的关系')
				if (!this.requestData.guarantee_mobile) return this.msg('请填写担保人电话')
				if (!reg.test(this.requestData.guarantee_mobile)) return this.msg('请输入正确的手机号')

				if (!this.dealShow) return this.msg('请阅读并同意《服务协议》及《隐私政策》')

				uni.showLoading({
					title: '加载中...',
					mask: true
				});

				this.$H.post(this.$api.apartment_apartment, {
					...this.requestData
				}, {
					token: true
				}).then(res => {
					uni.hideLoading()
					// this.msg('提交成功')
					uni.showModal({
						title: '友情提示',
						content: '你的申请已提交，请等待米欧客服联系您',
						showCancel: false,
						success: res => {
							if (res.confirm) {
								uni.navigateBack()
							}
						}
					})
				})
			},
			birthdayPicker(e) {
				this.requestData.birthday = e.detail.value
			},
			bindPickerChange(e) {
				this.requestData.relation = this.array[e.detail.value]
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #F3F3F3;
	}

	.apply {
		.title {
			padding: 40rpx 0 10rpx 0;
			position: relative;
			font-size: 34rpx;
			font-weight: bold;
			color: #202020;

			&.title:before {
				content: '';
				position: absolute;
				bottom: 10rpx;
				left: 4rpx;
				width: 132rpx;
				height: 10rpx;
				background: linear-gradient(90deg, #FFB24B 0%, rgba(255, 178, 75, 0) 100%);
			}
		}

		.user-form {
			padding: 0 30rpx;
			background-color: #fff;

			.form-item {
				border-bottom: 1px solid #F6F6F6;
				padding: 40rpx 0;

				.item-left {
					width: 260rpx;
					font-size: 28rpx;
					font-weight: 400;
					color: #202020;
					line-height: 28rpx;
				}

				input {
					flex: 1;
				}

				.input-css {
					font-size: 28rpx;
					font-weight: 400;
					color: #8D8D8D;
					line-height: 28rpx;
				}
			}

			.textarea {
				padding: 30rpx 40rpx 0 40rpx;
				background: #F5F8FB;
				border-radius: 10px;

				.input-css {
					font-size: 28rpx;
					font-weight: 400;
					color: #8D8D8D;
					line-height: 28rpx;
				}

				textarea {
					width: 100%;
				}
			}
		}

		.user-form>view:last-child {
			border: none;
		}

		.button {
			z-index: 1000;
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
			padding: 20rpx 30rpx 35rpx 30rpx;
			background-color: #fff;

			.checked {
				width: 36rpx;
				height: 36rpx;
				margin-right: 24rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.butxt {
				text-align: center;
				padding: 24rpx 0;
				background: #FFB24B;
				border-radius: 34px 34px 34px 34px;
				font-size: 28rpx;
				font-weight: 400;
				color: #FFFFFF;
			}
		}
	}
</style>